<template>
  <div class="user-management-container">
    <!-- 顶部操作栏 -->
    <div class="top-bar">
      <h2 class="title">用户管理</h2>
    </div>

    <!-- 用户表格 -->
    <el-table
      :data="userList"
      style="width: 100%"
      :header-cell-style="{ background: '#f5f7fa' }"
      v-loading="loading"

    >
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="username" label="用户名" min-width="150" />
      <el-table-column prop="email" label="邮箱" min-width="200" />
      <el-table-column prop="role" label="角色" width="120">
        <template #default="scope">
          <el-tag :type="scope.row.role === 'ADMIN' ? 'danger' : 'success'">
            {{ scope.row.role === 'ADMIN' ? '管理员' : '普通用户' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button
            size="mini"
            type="primary"
            @click="showEditUserDialog(scope.row)"
          >
            修改
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 无数据提示（当用户列表为空时显示） -->
    <div v-if="!loading && userList.length === 0" class="no-data">
      <el-empty description="暂无用户数据"></el-empty>
    </div>

    <!-- 修改用户对话框 -->
    <el-dialog
      title="修改用户信息"
      :visible.sync="editDialogVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="form" label-width="80px" :rules="editFormRules" ref="editFormRef">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="form.role" placeholder="请选择角色">
            <el-option label="普通用户" value="USER" />
            <el-option label="管理员" value="ADMIN" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="reset">
            重置密码
          </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUserChanges">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {mapActions, mapGetters, mapMutations} from "vuex";

export default {
  name: 'UserManagement',
  data() {
    return {
      // 表格数据和状态（移除分页相关变量：currentPage、totalUsers）
      userList: [],
      loading: false,

      // 对话框状态
      editDialogVisible: false,
      resetPasswordDialogVisible: false,
      addDialogVisible: false,

      // 表单数据
      form: { // 修改用户表单（不含密码）
        id: '',
        username: '',
        email: '',
        role: ''
      },

      // 当前编辑的用户ID
      currentUserId: null,

      // 表单校验规则（提升数据合法性）
      editFormRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        role: [{ required: true, message: '请选择角色', trigger: 'change' }]
      },
    }
  },
  created() {
    // 初始化加载全部用户数据（无需分页，直接拉取所有）
    this.loadUserList()
  },
  mounted() {

  },
  methods: {
    ...mapActions(['getUserList','updateUserInfo','resetPassword']),


    loadUserList() {
      // 异步请求完成后，再处理数据、计算总数、关闭加载
      this.getUserList().then((userList) => {
        this.userList = userList;
        this.totalUsers = userList.length;
      });
    },
    // 修改用户信息（表单校验 + 模拟接口）
    saveUserChanges() {
      this.updateUserInfo(this.form).then((success) => {
        if (success) {
          this.$message.success('信息已保存');
          this.editDialogVisible = false
          this.loadUserList()
        } else {
          this.$message.error('保存失败，请重试');
        }
      })
    },
    // 重置密码
    reset() {
      this.resetPassword(this.form).then((success) => {
        if (success) {
          this.$message.success('密码已重置');
          this.editDialogVisible = false
          this.loadUserList()
        } else {
          this.$message.error('重置失败，请重试');
        }
      });

    },
    // 显示编辑用户对话框（赋值当前用户信息，不含密码）
    showEditUserDialog(user) {
      this.currentUserId = user.id
      this.form = {
        id: user.id,
        username: user.username,
        email: user.email,
        role: user.role
      }
      this.editDialogVisible = true
    },



    // 新增用户（表单校验 + 模拟接口）
    addNewUser() {
      this.$refs.addFormRef.validate((isValid) => {
        if (isValid) {
          // 实际项目中替换为：后端新增用户接口（传完整用户信息）
          // 示例：axios.post('/api/users', this.addForm)
          setTimeout(() => {
            // 生成新用户ID（模拟后端自增）
            const newId = this.userList.length ? Math.max(...this.userList.map(item => item.id)) + 1 : 1
            // 新增用户到列表（密码显示为星号，避免明文）
            this.userList.push({
              id: newId,
              ...this.addForm,
              password: '*******' // 前端显示用，后端存储加密后的密码
            })
            this.addDialogVisible = false
            this.$message.success('用户新增成功')
          }, 300)
        }
      })
    },

    // 删除用户（确认提示 + 模拟接口）
    handleDelete(user) {
      this.$confirm(`确定要删除用户「${user.name}」吗？删除后不可恢复！`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        // 实际项目中替换为：后端删除接口（传用户ID）
        // 示例：axios.delete(`/api/users/${user.id}`)
        setTimeout(() => {
          // 本地过滤掉删除的用户（避免重新请求接口）
          this.userList = this.userList.filter(item => item.id !== user.id)
          this.$message.success('用户删除成功')
        }, 300)
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },

    // 判断是否为管理员（与原项目逻辑保持一致，后续可对接真实权限）
    isAdmin() {
      // 实际项目中替换为：从Vuex或localStorage获取真实角色
      // return this.$store.getters.role === 'ADMIN' || localStorage.getItem('user-role') === 'ADMIN'
      return true // 测试阶段默认返回管理员权限，后续可修改
    }
  }
}
</script>

<style scoped>
.user-management-container {
  padding: 20px 100px 100px 100px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #303133;
}

/* 无数据提示样式 */
.no-data {
  margin-top: 50px;
  text-align: center;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-button--mini) {
  padding: 7px 12px;
  margin-right: 5px;
}

:deep(.el-table__header) {
  background-color: #f5f7fa;
}

/* 优化对话框表单间距 */
:deep(.el-dialog .el-form-item) {
  margin-bottom: 16px;
}

/* 优化加载状态文字样式 */
:deep(.el-loading-text) {
  color: #409EFF;
}
</style>
